<template>
	<view :style="{minHeight:hei+'px',position: 'relative'}" style="padding-bottom: 200rpx;">
		<!-- <image class="reservationBj" src="/static/tabBar/bj.png" mode=""></image> -->
		<view class="reservationBj"></view>
		<view class="flex-c-c-s"
			style="width:686rpx;height:140rpx;background: rgba(255, 255, 255, 0.31);border-radius: 20px;margin: 32rpx;padding: 20rpx 30rpx;">
			<view class="flex-r-s-c">
				<image src="../../static/icon/icon-xm@3.png" mode="widthFix" style="width: 32rpx;"></image>
				<text style="font-size: 28rpx;color: #FFFFFF;margin-left: 5rpx;">{{obj.name}}</text>
			</view>
			<view class="flex-r-s-c" style="margin-top: 20rpx;">
				<image src="../../static/icon/icon-fw@3.png" mode="widthFix" style="width: 32rpx;"></image>
				<text style="font-size: 28rpx;color: #FFFFFF;margin-left: 5rpx;">{{obj.time}}</text>
			</view>
		</view>
		<view class="flex-c-c-c" style="padding:15px 10px;"
			:style="{paddingBottom:time_active_obj.time_active!=null?'120rpx':'0rpx'}">
			<view class="felx-c-c-c" style="width: 650rpx;height: auto;">
				<!-- 选择栏 -->
				<view class="flex-r-b-s"
					style="width:650rpx;height: 45px;align-items: flex-end!important;position: relative;">
					<view @click="active1=1" :class="[active1===1?'active1':'active3','flex-c-c-c']">
						<text>选择技师</text>

					</view>
					<view @click="qiehuan();timeList(active_time)"
						:class="[active1===2?'active2':'active','flex-c-c-c']">
						<text>选择时间</text>

					</view>
					<view
						style="position:absolute;bottom: 0;left: 30px;width: 550rpx;background-color:#FFFFFF;z-index: 88;height:20px;">
					</view>
				</view>
				<!-- 技师内容 -->
				<view class="flex-r-b-c"
					style="width: 650rpx;height: auto;background-color:#FFFFFF;flex-wrap:wrap!important;border-bottom-left-radius: 6px;border-bottom-right-radius: 6px;padding: 20rpx 18rpx;"
					v-if="active1===1">
					<view class="flex-c-c-c views_js" v-for="(v,i) in arr" :key='i' @click="technician(v.id)"
						style="border-bottom: 1rpx solid #F4F4F4;">
						<view class="flex-r-b-c" style="width: 100%;padding:0rpx 20rpx;" v-if="isText == true">
							<view class="flex-r-s-c">
								<view class="flex-c-c-c">
									<image :src="base.imgUrl+v.timg" mode="aspectFill"
										style="width: 120rpx;height: 120rpx;border-radius: 50%;"></image>
								</view>
								<view class="flex-c-b-s" style="height: 100%;margin-left: 28rpx;">
									<view class="flex-r-s-c">
										<text
											style="font-size: 36rpx;color: #45806E;font-weight: bold;">{{v.name}}</text>
										<text
											style="font-size: 24rpx;color: #FF6C1D;background: rgba(255, 108, 29, 0.07);padding: 5rpx;">{{v.tname}}</text>
									</view>
									<text
										style="font-size: 24rpx;color: #000000;margin-top: 20rpx;">好评率：{{v.praise}}%</text>
								</view>
							</view>

							<view class="flex-c-c-c"
								style="width: 160rpx;height: 60rpx;background-color: #45806E;border-radius: 36rpx;"
								@click.stop="xuanzejishi(v,i)">
								<text style="font-size: 28rpx;color: #FFFFFF;" v-if="v.type == 0">选择TA</text>
								<text style="width: 160rpx; height: 60rpx; line-height: 60rpx; text-align: center; border-radius: 36rpx; font-size: 28rpx;color: #FFFFFF; background-color: #999" v-if="v.type == 1">已选择</text>
							</view>
						</view>
					</view>
					<view v-if="isText == false" style="width: 100%; text-align: center; font-weight: 900;">{{text}}</view>
				</view>
				<!-- 选择时间 -->
				<view class="flex-r-c-c"
					style="width: 100%;height: auto;background-color:#FFFFFF;border-bottom-left-radius: 6px;border-bottom-right-radius: 6px;"
					v-if="active1===2">
					<!-- 选择今天明天后天 -->
					<view class="flex-c-c-c" v-for="(v,i) in item_list" :key='i'
						:style="{borderWidth:active_time===i?'1px':'0px'}">
						<view class="flex-c-c-c active_time" @click="active_time=i;timeList(i);">
							<text style="color: #4B4B4B;font-size: 14px;">{{v.text}}</text>
							<text style="color: #4B4B4B;font-size: 12px;padding-bottom:3px;"
								:class="[active_time===i?'active_time1':'']">{{v.time}}</text>
						</view>
					</view>
				</view>
				<!-- 其他 -->
				<view class="flex-c-s-s" v-if="active1===2">
					<view v-for="index in 2" :key='index' style="width: 100%;"
						v-if="item_list[active_time].morning_arr.length!=0||item_list[active_time].afternoon_arr.length!=0">
						<view class="flex-r-s-c title">
							<view></view>
							<text>{{index==0?'上午预约':'下午预约'}}</text>
						</view>
						<view class="flex-r-b-s time_list"
							v-if="index==0?item_list[active_time].morning_arr.length==0?false:true:item_list[active_time].afternoon_arr.length==0?false:true">
							<view class="time_list_view flex-c-c-c"
								v-for="(v,i) in item_list[active_time][index==0?'morning_arr':'afternoon_arr']"
								:key="i" :style="{backgroundColor:v.type!=1?'#EAEAEA':(time_active_obj.time_active==active_time&&time_active_obj.time==v.time?'#45806E':'#FFFFFF'),
						color:time_active_obj.time_active==active_time&&time_active_obj.time==v.time?'#FFFFFF':'#4A4A4A',
						borderWidth:v.type!=1?'2rpx':'0rpx',width:v.type!=1?'146rpx':'150rpx',height:v.type!=1?'70rpx':'74rpx'}"
								@click="time_active_obj = {time_active: v.type == 1 ? active_time : null,time: v.type == 1 ? v.time : null};technicianList();this.active1 = active_js.id?2:1;isPop = true">
								<text 
									:style="{color:time_active_obj.time_active==active_time&&time_active_obj.time==v.time?'#FFFFFF':'#4A4A4A'}">{{v.time}}</text>
								<view class="is_time flex-c-c-c" v-if="v.type!=1"
									:style="{width:v.type==3?'52rpx':'72rpx'}">
									<text>{{v.type==3?'已满':'未排班'}}</text>
								</view>
							</view>
						</view>
						<view class="flex-c-c-c" v-else
							style="color: #4B4B4B;font-size: 32rpx;height: 100rpx;width: 100%;">
							该技师{{index==0?'上午':'下午'}}没有排班
						</view>
					</view>
					<view class="flex-c-c-c" style="color: #4B4B4B;font-size: 32rpx;height: 100rpx;width: 100%;"
						v-if="item_list[active_time].morning_arr.length==0&&item_list[active_time].afternoon_arr.length==0">
						该技师当天没有排班
					</view>
				</view>
			</view>
		</view>
		<view style="width: 750rpx;height: 178rpx;position: fixed; left: 0rpx; bottom: 0rpx; background-color: #FFF;" v-if="isPop"></view>
		<view class="bottom_gwc flex-r-b-c" v-if="isPop">
			<view class="">
				<text
					:style="{color:time_active_obj.time? '#272823':'#999999',fontSize:time_active_obj.time? '36rpx':'28rpx',fontWeight: time_active_obj.time?'600':'400'}">{{time_active_obj.time?item_list[time_active_obj.time_active].text:'请选择时间'}}{{time_active_obj.time?time_active_obj.time:''}}</text>
				<view class="flex-r-c-s one-line-ellipsis">
					<text v-if="active_js.name" style="font-size: 28rpx;color: #999999;">{{active_js.tname}}</text>
					<text
						:style="{fontSize: '28rpx',color:active_js.name? '#FF6C1D':'#999999',fontWeight:active_js.name? '600':'400',padding:active_js.name?'0 10rpx':'0rpx'}">{{active_js.name || '请选择技师'}}</text>
					<text v-if="active_js.name" style="font-size: 28rpx;color: #999999;">为您服务</text>
				</view>
			</view>
			<view class="flex-r-b-c">
				<view class="flex-c-c-c"
					style="width: 160rpx;height: 72rpx;background-color: #EAEAEA;border-radius: 36rpx;border: 1rpx solid #E3E3E3;"
					@click.stop="conzhi">
					<text style="font-size: 28rpx;color: #3B3B3B;">重置</text>
				</view>
				<view class="flex-c-c-c"
					style="width: 160rpx;height: 72rpx;background-color: #45806E;border-radius: 36rpx;border: 1rpx solid #45806E;margin-left: 22rpx;"
					@click.stop="item_fn_true()">
					<text style="font-size: 28rpx;color: #FFFFFF;">立即预约</text>
				</view>
			</view>
			<!-- <view class="flex-r-a-c bottom_gwcs">
				<view class="text1 flex-r-s-c">
					<text
						class="time_text">{{item_list[time_active_obj.time_active].text}}{{time_active_obj.time}}</text>
					<text class="sc_text">服务时间约90分钟</text>
				</view>
				<view class="text_btn flex-c-c-c" @click="item_fn_true()">
					确定
				</view>
			</view> -->
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				hei: this.$hei,
				obj: {},
				tj_active: false,
				base: this.$base,
				active_arr: null, //技师选中下标
				active1: 1, //当前选择-----1===技师，2===时间
				// 选择框
				list: [],
				arr: [],
				time_active_obj: {
					time_active: null, //最终选中的日期
					time: null //最终选中的时间段
				},
				item_list: [{ //时间假数据
						time: this.GetDateStr(0),
						text: '今天',
						morning_arr: [],
						afternoon_arr: []
					},
					{
						time: this.GetDateStr(1),
						text: '明天',
						morning_arr: [],
						afternoon_arr: []
					}, {
						time: this.GetDateStr(2),
						text: '后天',
						morning_arr: [],
						afternoon_arr: []
					}
				],
				active_time: 0,
				isPop: false,
				active_js: {},
				text: '暂无技师',
				isText: true
			}
		},
		onLoad(v) {
			this.obj =v
			this.technicianList()
		},
		methods: {
			conzhi() {
				this.isPop = false
				this.active_js = {}
				this.active1 = 1
				this.active_arr=null
				this.time_active_obj = {
					time_active: null, //最终选中的日期
					time: null //最终选中的时间段
				}
				this.technicianList()
				this.timeList()
			},
			fn_disabled(v) {
				return v.length == 0 ? true : false
			},
			xuanzejishi(v, i) {
				this.isDisplay = true
				this.active_arr = i;
				this.time_active_obj.time != null ? '' : this.active1 = 2;
				this.isPop = true
				this.active_js = v
				this.arr.filter(el => {
					if(el.id == v.id){
						el.type = 1
					} else {
						el.type = 0
					}
				})
				this.timeList(this.active_time)
			},
			qiehuan() { //切换选择时间
				this.active1 = 2
			},
			GetDateStr(AddDayCount, isY) { //计算时间
				var dd = new Date();
				dd.setDate(dd.getDate() + AddDayCount); //获取AddDayCount天后的日期
				var y = dd.getFullYear();
				var m = dd.getMonth() + 1; //获取当前月份的日期
				var d = dd.getDate();
				m = 10 > m ? `0${m}` : m
				d = 10 > d ? `0${d}` : d
				return isY ? y + "-" + m + "-" + d : m + "-" + d;
			},
			timeList(index) { //服务时间选择列表 
				this.$api.Service_timeList({
					id: this.active_arr !== null ? this.arr[this.active_arr].id : null,
					date: this.GetDateStr(index, true)
				}).then(res => {
					console.log(res.data.data)
					let ress = res.data.data
					this.item_list[index].afternoon_arr = ress.afternoon
					this.item_list[index].morning_arr = ress.morning
				})
			},
			technicianList() { //技师详情
			// if(this.active_js.id) return
				let obj = {
					service_id: this.obj.id,
					date: this.GetDateStr(this.active_time, true),
					time: this.time_active_obj.time
				}
				this.$api.Service_technicianList(obj).then(res => {
					console.log(res)
					this.arr = res.data.data
					res.data.data.length == 0 ? this.isText = false : this.isText = true
					if(this.active_js.id){
						this.arr.filter(el => {
							if(el.id == this.active_js.id){
								el.type = 1
							}
						})
					}
				})
			},
			item_fn_true() {
				let that = this
				if(this.GetDateStr(this.active_time, true) && this.time_active_obj.time && this.active_js.id){
				this.$api.Service_Service({
					service_id:this.obj.id,
					date: this.GetDateStr(this.active_time, true)+ ' ' +this.time_active_obj.time,
					id:this.active_js.id
				}).then(res=>{
					// uni.navigateTo({
					// 	url: `/order/reservationOrder/reservationOrder?service_id=${/*服务id*/this.obj.id}&date=${/*时间*/this.GetDateStr(this.time_active_obj.time_active,true)} ${this.time_active_obj.time}&id=${/*技师id*/this.active_js.id}&id_name=${this.active_js.name}`
					// })
					let data = {
						service_id: this.obj.id,
						date: `${/*时间*/this.GetDateStr(this.time_active_obj.time_active,true)} ${this.time_active_obj.time}`,
						id: this.active_js.id,
						id_name: this.active_js.name
					}
					that.$api.Service_serviceConfirm(data).then(res => {
						console.log(res)
						that.$api.Service_submit({id: res.data.data.id}).then(res1 => {
							console.log(res1)
							uni.showToast({
								title: '预约成功',
								icon: 'none'
							})
							setTimeout(() => {
								uni.navigateTo({
									url: `/order/ordersTrue/ordersTrue?type=${that.tj_active?3:1}`
								})
							}, 1000)
						})
					})
				})
				}else{
					uni.showToast({
						title:"请选择技师或者时间后再确定",
						icon:'none'
					})
				}
			},
			bindPickerChange(el) {
				console.log(el.detail.value)
				this.zz_active_fl = {
					active: this.active,
					active_fl: Number(el.detail.value)
				}
				this.active_fl = Number(el.detail.value)
				this.technicianList()
			},
			active_fl_fn(i, v) {
				if (v.secondary.length !== 0) {
					if (this.active === i) return
					this.active_fl = null
					this.active = i

				} else {
					uni.showToast({
						title: '该分类没有服务,请先购买服务',
						icon: 'none'
					})
				}
			},
			technician(id) {
				uni.navigateTo({
					url: '/order/technicianDetails/technicianDetails?id=' + id
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.reservationBj {
		width: 100vw;
		height: 500rpx;
		background: linear-gradient(180deg, #41967C 0%, rgba(255, 255, 255, 0) 100%);
		position: absolute;
		top: -40rpx;
		z-index: -1;
	}

	.location_message {
		height: 50px;
		padding: 0px 10px;
		background-color: #FFFFFF;
		border-top: 2px solid #F5F5F5;
		border-bottom: 2px solid #F5F5F5;

		.position {
			height: 40px;
			width: 70%;

			.position_text {
				margin-left: 5px;

				.position_text1 {
					font-size: 14px;
					color: #363636;
				}

				text {
					color: #888888;
					font-size: 12px;
				}
			}
		}

		.message_red {
			position: relative;

			view {
				position: absolute;
				right: -2px;
				top: -2px;
				width: 6px;
				height: 6px;
				background: #E8351E;
				border-radius: 50%;
			}
		}
	}

	.active {
		width: 325rpx;
		height: 35px;
		background: #EAEAEA;
		border-radius: 0px 14px 0px 14px;
		z-index: 99;

		text {
			color: #4B4B4B;
			font-size: 14px;
		}
	}

	.active3 {
		width: 325rpx;
		height: 35px;
		background: #EAEAEA;
		border-radius: 14px 0px 14px 0px;
		z-index: 99;

		text {
			color: #4B4B4B;
			font-size: 14px;
		}
	}

	.active2 {
		width: 326rpx;
		height: 45px;
		background: #FFFFFF;
		border-radius: 14px 14px 0px 14px;
		z-index: 99;

		text {
			font-size: 18px;
			color: #0F4C3A;
			font-weight: bold;
		}
	}

	.active1 {
		width: 326rpx;
		height: 45px;
		background: #FFFFFF;
		border-radius: 14px 14px 14px 0px;
		z-index: 99;

		text {
			font-size: 18px;
			color: #0F4C3A;
			font-weight: bold;
		}
	}

	.views_js {
		width: 100%;
		height: 170rpx;
		margin: 5rpx 0rpx;

		.views_js2 {
			width: 300rpx;
			height: 164rpx;
			border-radius: 5px;
			box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.16);
		}

		.views_js_active {
			border: 2rpx solid #0F4C3A;
			border-radius: 5px;
		}
	}

	.active_time {
		width: 114px;
		height: 66px;
	}

	.active_time1 {
		border-bottom: 2px solid #0F4C3A;
		border-radius: 2px;
	}

	.title {
		height: 120rpx;
		width: 100%;

		view {
			height: 36rpx;
			width: 10rpx;
			border-radius: 5rpx;
			background-color: #45806E;
		}

		text {
			font-size: 28rpx;
			font-weight: bold;
			color: #272823;
			-webkit-text-stroke: 1 rgba(0, 0, 0, 0);
			text-stroke: 1 rgba(0, 0, 0, 0);
			margin-left: 15rpx;
		}
	}

	.time_list {
		width: 100%;
		height: auto;
		flex-wrap: wrap;

		.time_list_view {
			border-radius: 8px;
			position: relative;
			border-style: solid;
			border-color: #CCCCCC;
			margin: 8rpx 0px;

			.is_time {
				position: absolute;
				right: 0;
				top: -13rpx;
				height: 26rpx;
				width: 52rpx;
				background-color: #EAEAEA;
				border-radius: 8rpx;

				text {
					font-size: 20rpx;
					color: #45806E;
				}
			}
		}
	}

	.bottom_gwc {
		position: fixed;
		bottom: env(safe-area-inset-bottom);
		bottom: constant(safe-area-inset-bottom);
		left: 0rpx;
		width: 750rpx;
		height: 130rpx;
		background-color: #FFF;
		padding: 34rpx 32rpx;

		.bottom_gwcs {
			border-bottom: 1rpx solid rgba(255, 255, 255, 0.94);
			width: 750rpx;
			position: absolute;
			top: 0;
			left: 0;
			height: 50px;
		}

		.text1 {
			.time_text {
				font-size: 32rpx;
				font-weight: bold;
				color: #272823;
			}

			.sc_text {
				font-size: 24rpx;
				color: #3B3B3B;
				margin-left: 20rpx;
			}
		}

		.text_btn {
			width: 228rpx;
			height: 72rpx;
			background: #45806E;
			border-radius: 42rpx;
			font-size: 32rpx;
			color: #FFFFFF;
		}
	}

	.fl_view {
		position: absolute;
		left: -2rpx;
		width: 125px;
		background-color: #FFFFFF;
		border-bottom-left-radius: 6px;
		border-bottom-right-radius: 6px;
		z-index: 10000;
	}

	.zi_fl_active {
		width: 176rpx;
		height: 68rpx;
		background: #FFFFFF;
		border: 2rpx solid #CCCCCC;
		border-radius: 12rpx;

		text {
			font-size: 28rpx;
		}
	}
</style>
